<template>
  <div>
    <el-card shadow="never" class="card">
      <div slot="header">
        <span>{{ id ? '编辑文章' : '新增文章' }}</span>
      </div>
      <!-- 新增文章表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="作者" prop="author">
          <el-input
            v-model="ruleForm.author"
            style="width: 300px; height: 32px"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="ruleForm.title"
            style="width: 300px; height: 32px"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="ruleForm.isShow"
            active-color="#409EFF"
            inactive-color="#DCEFE6"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="摘要" prop="summary">
          <el-input
            style="width: 500px; height: 54px"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="ruleForm.summary"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="文章图片" prop="summary">
          <!-- 上传图片 -->
          <el-upload
            ref="upload"
            :action="uploadUrl"
            :headers="headers"
            :on-success="handleAvatarSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <img
            v-if="ruleForm.coverImg"
            :src="ruleForm.coverImg"
            style="height: 100px"
            alt=""
          />
        </el-form-item>
        <!-- 文章内容，富文本和markdown -->
        <el-form-item label="切换文章类型">
          <div>
            <el-radio-group v-model="ruleForm.editorType">
              <el-radio :label="0">富文本</el-radio>
              <el-radio :label="1">markdown</el-radio>
            </el-radio-group>
          </div>
          <!-- 富文本 -->
          <div v-show="ruleForm.editorType === 0">
            <Tin ref="Tin" />
          </div>
          <!-- markdown -->
          <div v-show="ruleForm.editorType === 1">
            <Md ref="Md" />
          </div>
        </el-form-item>
        <!-- 新增编辑 -->
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary"
            size="mini"
            @click="submitForm"
            >{{ id ? '立即编辑' : '立即新增' }}</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import articleApi from '@/api/article'
import Tin from '@/components/Tinymce/index.vue' //富文本
import Md from '@/components/MarkdownEditor/index.vue' //makdown
import mixin from '@/mixins'
export default {
  mixins: [mixin],
  components: {
    Tin,
    Md,
  },
  data() {
    return {
      id: '',
      loading: false,
      ruleForm: {
        editorType: 0, //0是富文本 1是markdown
        // author: '',
        title: '',
        isShow: 1,
        coverImg: '',
      },
      rules: {
        author: [
          { required: true, message: '请输入作者名称', trigger: 'blur' },
        ],
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      },
    }
  },
  created() {
    this.id = this.$route.params.id
    if (this.id) {
      console.log('编辑')
      this.getDetail() //获取文章详情
    } else {
      console.log('新增')
    }
  },
  mounted() {},
  methods: {
    //获取文章详情
    getDetail() {
      articleApi.articleDetailApi(this.id).then(res => {
        console.log(res, 'getDetail.res')
        if (res.success) {
          this.ruleForm = res.data.productArticle
          //判断是富文本还是markdown
          if (this.ruleForm.editorType === 0) {
            //富文本赋值
            this.$refs.Tin.setDelayContent(this.ruleForm.content1)
          } else {
            //markdown赋值
            this.$refs.Md.setHtml(this.ruleForm.content1)
          }
        } else {
          this.$message.error('获取文章明细失败，原因是', res.message)
        }
      })
    },
    handleAvatarSuccess(res, file) {
      console.log(res, 'resss')
      if (res.success) {
        this.ruleForm.coverImg = res.data.fileUrl
        this.$refs.upload.clearFiles()
      } else {
        this.$message.error('上传失败')
      }
    },
    submitForm() {
      this.loading = true //打开按钮动画
      this.$refs.ruleForm.validate(valid => {
        //如果是新增文章
        if (valid) {
          //处理富文本和markdown内容
          var content1 = ''
          if (this.ruleForm.editorType === 0) {
            // console.log(ruleForm.editorType, 'ruleForm.editorType')
            content1 = this.$refs.Tin.getContent()
          } else {
            content1 = this.$refs.Md.getHtml()
          }
          console.log(this.id, 'this.id')
          articleApi.addArticleApi({ ...this.ruleForm, content1 }).then(res => {
            this.loading = false
            if (res.success) {
              this.$message.success('新增文章成功')
              this.$router.push({ path: '/content/articleList' })
            } else {
              this.$message.error('新增文章失败')
            }
          })
        }
        //如果是编辑文章
        if (this.id) {
          articleApi.updateArticle(this.ruleForm).then(res => {
            if (res.success) {
              this.$router.push({ path: '/content/articleList' })
            } else {
              this.$message.error('新增编辑失败')
            }
            this.loading = false
          })
        } else {
          // this.$message.error('请填写必写内容')
        }
      })
    },
  },
}
</script>

<style>
.card {
  margin: 30px;
}
</style>